"use client"

import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
import React from "react";
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator
} from "@/components/ui/dropdown-menu"
import { Link2, Pencil, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { useApiMutation } from "@/hooks/use-api-mutation";
import { api } from "@/convex/_generated/api";
import { ConfirmModal } from "./confirm-modal";
import { Button } from "./ui/button";
import { useRenameModal } from "@/store/use-rename-modal";
// 从 @radix-ui/react-dropdown-menu 导入 DropdownMenuContentProps 类型

interface ActionsProps {
    children: React.ReactNode; // 子元素，可以是任何 React 节点
    side: DropdownMenuContentProps["side"]; // 从 DropdownMenuContentProps 中获取的 side 属性
    sideOffset?: DropdownMenuContentProps["sideOffset"]; // 从 DropdownMenuContentProps 中获取的可选 sideOffset 属性
    id: string; // id 属性，类型为字符串
    title: string; // title 属性，类型为字符串
}

export const Actions = ({
    children,
    side,
    sideOffset,
    id,
    title,
}: ActionsProps) => {
    const {onOpen} = useRenameModal();
    const {mutate,pending}=useApiMutation(api.board.remove);
    const onCopyLink = () => {
        // 使用 Clipboard API 将文本写入剪贴板
        navigator.clipboard.writeText(`${window.location.origin}/board/${id}`)
            .then(() => {
                // 如果成功，显示成功通知
                toast.success("Link copied");
            })
            .catch(() => {
                // 如果失败，显示错误通知
                toast.error("Failed to copy Link");
            });
    };
        const onDelete = () => {
            // 调用 useApiMutation 创建的 mutate 函数，传入 id 参数
            mutate({ id })
            .then(()=> toast.success("Board Deleted"))
            .catch(()=> toast.error("Failed to delete Board"));
        };
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                {children}
            </DropdownMenuTrigger>
            <DropdownMenuContent
                onClick={(e) => e.stopPropagation()} // 阻止事件传播
                side={side} // 设置下拉菜单的位置
                sideOffset={sideOffset} // 设置下拉菜单的偏移量
                className="w-60" // 设置下拉菜单的宽度
            >
                <DropdownMenuItem 
                    onClick={onCopyLink} // 点击事件处理函数}
                    className="p-3 cursor-pointer">
                    {/* 菜单项，包含内边距和指针样式 */}
                    <Link2 className="h-4 w-4 mr-2" />
                    {/* 链接图标，设置高度、宽度和右外边距 */}
                    Copy board link
                    {/* 菜单项文本 */}
                </DropdownMenuItem>
                <DropdownMenuItem 
                    onClick={()=>{onOpen(id,title)}} // 点击事件处理函数}
                    className="p-3 cursor-pointer">
                    {/* 菜单项，包含内边距和指针样式 */}
                    <Pencil className="h-4 w-4 mr-2" />
                    {/* 链接图标，设置高度、宽度和右外边距 */}
                    Rename
                    {/* 菜单项文本 */}
                </DropdownMenuItem>
                <ConfirmModal
                    header="Delete board?"
                    description="This will delete the board and all its contents."
                    disabled={pending}
                    onConfirm={onDelete}
                >
                <Button 
                    // onClick={onDelete} // 点击事件处理函数}
                    variant="ghost"
                    className="p-3 cursor-pointer text-sm w-full justify-start font-normal">
                    {/* 菜单项，包含内边距和指针样式 */}
                    <Trash2 className="h-4 w-4 mr-2" />
                    {/* 链接图标，设置高度、宽度和右外边距 */}
                    Delete
                    {/* 菜单项文本 */}
                </Button>
                </ConfirmModal>
            </DropdownMenuContent>
        </DropdownMenu>


    );
};